<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <h2 v-if="true">{{message}}</h2>
  <h2 v-if="false">{{message}}</h2>

  <h3 v-if="isShow">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    {{message}}
  </h3>
  <h3 v-else>当isShow为false时，显示我{{message}}</h3>

<!--  页面上显示分数-->
  <h4 v-if="score>=90">优秀</h4>
  <h4 v-else-if="score>=80">良好</h4>
  <h4 v-else-if="score>=70">中等</h4>
  <h4 v-else-if="score>=60">及格</h4>
  <h4 v-else="score<60">不及格</h4>


  <h2>{{result}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const vm=new Vue({
    el:'#app',
    data:{
      message:'你好啊',
      isShow:true,
      score:60
    },
    computed:{
      result() {
        let showMessage = ''
        if (this.score >= 90) {
          showMessage = '优秀'
          return showMessage
        } else if (this.score >= 80) {
          showMessage = '良好'
          return showMessage
        } else if (this.score >= 70) {
          showMessage = '中等'
          return showMessage
        } else {
          showMessage = '还行叭'
          return showMessage
        }
        // return showMessage
      }

    }
  })
</script>

</body>
</html>